<template>
  <div class="container">
    <!-- <catch-table :form-create="formCreate" v-bind="table" /> -->
    <el-card class="box-card">
      <el-button type="zz5" @click="adddialogVisible = true"
        >新增关键词
      </el-button>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <el-card>
            <!-- 						<div v-for="(item,index) in classinfo" :key="index" class="taqinfo">
							<el-link type="primary" @click="taqclass(item)">{{item.vocation_name}}</el-link>
						</div> -->

            <el-tree
              :data="data"
              :props="defaultProps"
              accordion
              :highlight-current="true"
              @node-click="handleNodeClick"
            >
            </el-tree>
          </el-card>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="tag-management-area">
          <!-- <el-card class="tag-card">

            <div class="tag-display-section">
              <div class="tag-container">
                <el-tag
                  v-for="(tag, index) in sys"
                  :key="index"
                  closable
                  class="custom-tag"
                  @close="handleClose(tag)"
                >
                  {{ tag.vocation_name }}
                </el-tag>
              </div>


              <div class="tag-input-section" v-if="parent_id !== 0">
                <el-input
                  v-if="inputVisible"
                  ref="saveTagInput"
                  v-model="inputValue"
                  class="input-new-tag"
                  size="small"
                  placeholder="输入标签内容"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                />
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  icon="el-icon-plus"
                  @click="showInput"
                >
                  添加标签
                </el-button>
              </div>
            </div>
          </el-card> -->

          <el-card class="tag-card1">
            <!-- 标签展示区 -->
            <div class="tag-display-section">
              <el-table
                :data="rawFullData"
                :columns="tableColumns"
                border
                stripe
                size="small"
                style="width: 100%"
                :empty-text="
                  rawFullData.length == 0
                    ? '请点击左侧节点查看数据'
                    : '暂无数据'
                "
              >
                <el-table-column
                  label="类型"
                  prop="company_type_name"
                  minWidth="180"
                >
                </el-table-column>
                <el-table-column
                  label="上级"
                  prop="parent_label_name"
                  minWidth="180"
                >
                </el-table-column>
                <el-table-column
                  label="标签名称"
                  prop="label_name"
                  minWidth="180"
                >
                </el-table-column>
                <el-table-column
                  label="创建时间"
                  prop="created_at"
                  minWidth="180"
                >
                  <template #default="scope">
                    {{
                      scope.row.created_at
                        ? new Date(scope.row.created_at).toLocaleString()
                        : "无"
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  fixed="right"
                  header-align="center"
                  align="center"
                  width="200"
                >
                  <template #default="scope">
                    <el-button
                      link
                      type="danger"
                      size="small"
                      @click="addUpdata(scope.row)"
                      >修改
                    </el-button>
                    <el-button
                      link
                      type="danger"
                      size="small"
                      @click="shanChu(scope.row)"
                      >删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-dialog
        :visible.sync="adddialogVisible"
        v-bind="$attrs"
        v-on="$listeners"
        title="关键词"
      >
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-row>
            <!-- <el-form-item label="父级栏目" prop="parent_id">
              <el-cascader
                v-model="formData.company_type"
                :options="data"
                :props="{
                  checkStrictly: true,
                  label: 'vocation_name',
                  value: 'id',
                  children: 'children',
                }"
                :style="{ width: '100%' }"
                placeholder="请选择父级栏目"
                clearable
              ></el-cascader>
            </el-form-item> -->
            <el-form-item label-width="120px" label="类型：" prop="label_name">
              <div v-if="formData.id">
                {{ formData.company_type_name }}
              </div>
              <el-select
                v-model="formData.company_type"
                placeholder="请选择类型"
              >
                <el-option
                  v-for="item in data"
                  :key="item.value"
                  :label="item.label"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <!-- <el-input
                v-model="formData.label_name"
                placeholder="请输入关键词名称："
                clearable
                :style="{ width: '100%' }"
              >
              </el-input> -->
            </el-form-item>
            <el-form-item
              label-width="120px"
              label="关键词名称："
              prop="label_name"
            >
              <el-input
                v-model="formData.label_name"
                placeholder="请输入关键词名称："
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer">
          <el-button @click="adddialogVisible = false">取消</el-button>
          <el-button type="primary" @click="add()">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { method } from "lodash";
import {
  tableSysLabel,
  sysLabel,
  deleteLabel,
  putLabel,
  getLabel,
  postLabel,
} from "@/api/sysLabel";

export default {
  // mixins: [renderTable],
  data() {
    return {
      adddialogVisible: false,
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      classinfo: [],
      sys: [],
      cus: [],
      company_type: null,
      data: [
        // { id: "", label: "全部" },
        { id: 100, label: "招聘" },

        { id: 8, label: "协会" },
        { id: 7, label: "物资贸易商" },
        { id: 6, label: "劳务" },
        { id: 5, label: "监理" },
        { id: 4, label: "设计" },
        { id: 3, label: "物资工厂" },
        { id: 2, label: "工程公司" },
        { id: 1, label: "居间人" },
      ],
      parent_id: 0,
      defaultProps: {
        children: "children", // 子节点字段名
        label: "label", // 标签文本字段名（与处理后的数据一致）
      },
      formData: {
        company_type: "",
        label_name: "",
      },
      rules: {
        label_name: [
          {
            required: true,
            message: "请输入关键词名称：",
            trigger: "blur",
          },
        ],
      },
      tableData: [], // tag-card1 列表数据源
      // 表格列配置（根据需要展示的字段自定义）
      tableColumns: [],
      // 存储原始完整数据（用于后续筛选，避免重复请求接口）
      rawFullData: [],
    };
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      sysLabel({ company_type: this.company_type }).then((res) => {
        this.rawFullData = res.data;
      });
    },

    addUpdata(e) {
      this.adddialogVisible = true;
      getLabel(e.id).then((res) => {
        if (res.code == 10000) {
          this.formData = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    add() {
      this.adddialogVisible = true;

      if (this.formData.id) {
        // 修改
        putLabel(this.formData).then((res) => {
          if (res.code == 10000) {
            this.init();
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.adddialogVisible = false;
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      } else {
        postLabel(this.formData).then((res) => {
          if (res.code == 10000) {
            this.init();
            this.$message({
              type: "success",
              message: "新增成功!",
            });
            this.adddialogVisible = false;
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
        this.adddialogVisible = false;
      }
    },
    shanChu(e) {
      this.$confirm("确定删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteLabel(e.id).then((res) => {
          console.log(res);
          if (res.code == 10000) {
            this.init();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      });
    },
    handleNodeClick(data) {
      console.log(data);
      this.company_type = data.id;
      this.init();
    },
  },

  created() {
    this.getclassinfo();
  },
};
</script>

<style scoped>
.container {
  padding: 10px;
}

.box-card {
  margin-bottom: 10px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.taqinfo {
  line-height: 30px;
}

.grid-content {
  line-height: 20px;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* 标签间距 */
  padding: 8px 0;
  /* 上下间距 */
}

/* 自定义标签样式 */
.custom-tag {
  width: 100px;
  /* 固定宽度 */
  height: 32px;
  /* 固定高度 */
  line-height: 30px;
  /* 垂直居中 */
  text-align: center;
  /* 水平居中 */
  margin: 4px 0;
  /* 上下间距 */
  padding: 0 8px;
  /* 内边距 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.2s;
}

/* 鼠标悬停效果 */
.custom-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 卡片样式调整 */

.tag-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.tag-card1 {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.custom-tag {
  width: 120px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  padding: 0 10px;
  border-radius: 4px;
  background-color: #f0f9ff;
  border-color: #d9ecff;
  color: #409eff;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(32, 160, 255, 0.2);
}

.custom-tag >>> .el-tag__close {
  color: #409eff;
  margin-left: 5px;
}

.custom-tag >>> .el-tag__close:hover {
  color: white;
  background-color: #409eff;
}

.tag-input-section {
  display: flex;
  align-items: center;
}

.input-new-tag {
  width: 120px;
  margin-right: 10px;
}

.button-new-tag {
  color: #409eff;
  border-color: #d9ecff;
  background-color: #f0f9ff;
}

.button-new-tag:hover {
  background-color: #409eff;
  color: white;
}

/* 基础树样式 */
.el-tree {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", Arial, sans-serif;
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 10px;
}

/* 树节点样式 */
.el-tree-node {
  margin: 4px 0;
}

.el-tree-node__content {
  height: 36px;
  line-height: 36px;
  transition: all 0.3s ease;
  border-radius: 4px;
}

/* 鼠标悬停效果 */
.el-tree-node__content:hover {
  background-color: #e9f5ff;
}

/* 当前选中节点样式 */
.el-tree-node.is-current > .el-tree-node__content {
  background-color: #ecf5ff;
  color: #409eff;
  font-weight: 500;
}

/* 节点展开/折叠图标 */
.el-tree-node__expand-icon {
  color: #606266;
  font-size: 16px;
  transition: transform 0.3s;
}

.el-tree-node__expand-icon.expanded {
  transform: rotate(90deg);
}

/* 节点文本样式 */
.el-tree-node__label {
  font-size: 14px;
  margin-left: 6px;
}

/* 复选框样式 */
.el-checkbox__inner {
  border-radius: 3px;
}

/* 树线样式 */
.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background-color: #409eff;
  border-radius: 2px;
}

/* 折叠动画效果 */
.el-tree-node__children {
  transition: all 0.3s ease;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .el-tree {
    font-size: 13px;
  }

  .el-tree-node__content {
    height: 32px;
    line-height: 32px;
  }
}
</style>
